    

import useInitAction from "@/hooks/useInitAction";
import { forwardRef } from "react";
import { Popup} from '@antmjs/vantui'

import { View,Text,Image } from "@tarojs/components";
import closeIcon from '@/assets/images/close-icon.png';

interface ICallPhoneDialog{
    show: boolean;
    callMobile:string;
    handlePopStatus: (status) => void;
    handleCall:()=>void

}
const CallPhoneDialog :React.FC<ICallPhoneDialog>=forwardRef((props,ref)=>{
    const {show,callMobile,handlePopStatus,handleCall}=props;
    const { bottomSafeHeight } = useInitAction();
    const  formatPhoneNumber=(phoneNumber) =>{
        // 移除非数字字符
        const cleaned = ('' + phoneNumber).replace(/\D/g, '');
    
        // 检查手机号是否符合长度要求
        if (cleaned.length !== 11) {
            throw new Error('手机号必须为11位数字');
        }
    
        // 分割为344格式
        const formatted = `${cleaned.slice(0, 3)} ${cleaned.slice(3, 7)} ${cleaned.slice(7)}`;
        return formatted;
    }
    return <>
    {callMobile &&<Popup show={show} position="bottom" closeOnClickOverlay={true} onClickOverlay={() => handlePopStatus(false)} overlay={true} safeAreaInsetBottom={false} style={{ paddingBottom: bottomSafeHeight > 0 ? bottomSafeHeight + 'px' : '84rpx'}}>
        <View className="pt-28px box-border">
            <View className="flex items-center justify-end px-36px box-border">
                
            <Image src={closeIcon} className="w-36px h-36px" onClick={()=>handlePopStatus(false)}></Image>
            </View>
            <View className="mt-26px flex box-border flex-col items-center">
                <Text className="text-#666 text-32px font-bold"> 对方电话号</Text>
                <Text className="mt-16px font-bold text-#161618 text-44px">{formatPhoneNumber(callMobile)}</Text>
                <Text className="mt-50px text-24px text-#999">通话双方会看到各自真实手机号，请注意保护隐私</Text>
                <View className="mt-60px bg-#8232E8 text-#fff w-560px h-92px flex items-center justify-center font-bold text-#30px" onClick={handleCall}>拨打</View>
            </View>
           
        </View>
        </Popup>}
      </>

})
export default CallPhoneDialog;